import React, { useRef,useState  } from 'react'
import './index.scss'
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import {Progress} from 'antd'



var timer:any=null;
var timer2:any=null;

function BadService() {

    interface styleObj{
        top:string,
        left:string
        background:string
        transform:string
        animationDelay:string
      }
      const bgstar:any  = useRef()
   
      
      const Navigate=useNavigate() //不能写在函数里
      const [spanNum,setSpanNum] = useState<styleObj[]>([])
      let  [count,setCount] = useState<number>(5)
      let  [num,setNum] = useState<number>(0)
      const gotowhere = (url:string):void  =>{
        Navigate(url)
      }

        const timeDown = ()=>{
          timer = setInterval(()=>{
            if(count>=0){
              setCount(count--)
            }else{
              clearInterval(timer)
              timer = null;
              // 跳转页面 
              gotowhere("/login")
            }
          },1000)
    
          timer2 = setInterval(()=>{
            if(num<100){
              setNum(num+=2)
            }else{
              clearInterval(timer2)
              timer2=null
              gotowhere("/login")
            }
          },100)
        }
    


  
      const spanInit = ():void =>{
          const width:number = bgstar.current.clientWidth;
          const height:any   = document.getElementById('bgstar')?.clientHeight
          console.log(width,height)
          console.log(bgstar)
          for(var i = 0; i<520; i++){
              var x = width* Math.random() 
              var y = height* Math.random()
  
              var opacity = Math.random()
              var scaler = 1.5 * Math.random()
              var rate = 2.5 * Math.random() 
              
              var r = Math.random() * 255;
              var g = Math.random() * 255;
              var b = Math.random() * 255; 
              spanNum.push({
                  top:y+'px',
                  left:x+'px',
                  background:`rgba(${r},${g},${b},${opacity})`,
                  transform:'scale('+scaler+')',
                  animationDelay:rate+'s'
              })
          }
          setSpanNum([...spanNum])
      }

      
      useEffect(()=>{
        spanInit()
        timeDown()
        return  ()=>{
          //  离开的时候 立即销毁 
            clearInterval(timer)
            timer = null;
            clearInterval(timer2)
            timer2=null
          }
        },[])
  return (
    <div className='notfound errorpage' ref={bgstar}  id="bgstar">
         <img src={require('../../assets/images/503.png')} className='myimg' alt="" />
         <div className="down" onClick={()=>gotowhere("/login")}>
            {count}S
         </div>
         <div className="dao" onClick={()=>gotowhere("/login")}>
          <Progress type="circle" percent={num}  width={80} />
         </div>
         {
           spanNum.map((l:styleObj,i:number)=>(
            <span className="spandot" key={i} style={l} ></span>
           ))
         }
      </div>
  )
}

export default BadService